<template>
<div class="about">
  <h2>count1:{{count1}}</h2>
  <h2>count2:{{count2}}</h2>
  <h2>count3:{{count3}}</h2>
  <hr/>
  <button @click="increment">加1</button>
</div>
</template>

<script lang="ts">
import {computed, ref} from "vue";

export default {
  name: "ComputedDemo",
  setup(){
    // count是一个ref引用对象，内部包含存储数据的value属性
    const count1 = ref(0)
    //只有getter的计算属性
    //计算属性本质上也是一个ref对象
    const count2 = computed(() => {
      console.log('count2 computed',count1.value)
      return count1.value +2
    })
    //包含getter与setter的计算属性
    const count3 = computed ( {
      get() {
        return count1.value *2
      },
      set(value: number) {
        count1.value= value/2
      }
    })
    // 更新响应式数据的函数
    const increment = () =>{
      count1.value++
      console.log(count3.value)
      setTimeout(() => {
        count3.value += 2
      },1000)
    }
    return {
      count1,count2,count3,increment
    }
  }
}
</script>

<style scoped>

</style>
